/* 
用于收集用户点击界面的坐标位置的自定义hook
*/

import { onBeforeUnmount, onMounted, ref } from 'vue';

export default function useClickPosition() {
  const x = ref(-1)
  const y = ref(-1)

  const handleClick = (e: MouseEvent) => {
      console.log('click....')
      // 得到事件坐标, 更新数据
      x.value = e.pageX
      y.value = e.pageY
    }

  // 在组件挂载后, 给页面绑定点击的监听
  onMounted(() => {
    document.addEventListener('click', handleClick)
  })

  // 在组件卸载前, 解绑事件监听
  onBeforeUnmount(() => {
    document.removeEventListener('click', handleClick)
  })

  // 返回给外部组件使用的响应式数据
  return {
    x,
    y
  }
}